<template>
  <div class="help-container">
    <el-row :gutter="20">
      <!-- 帮助导航 -->
      <el-col :span="6" :xs="24">
        <el-card class="help-nav">
          <template #header>
            <div class="card-header">
              <el-icon><Help /></el-icon>
              <span>帮助中心</span>
            </div>
          </template>
          <el-menu
            :default-active="activeCategory"
            class="help-menu"
            @select="handleCategorySelect"
          >
            <el-menu-item index="getting-started">
              <el-icon><Guide /></el-icon>
              <span>入门指南</span>
            </el-menu-item>
            <el-menu-item index="literature">
              <el-icon><Document /></el-icon>
              <span>文献管理</span>
            </el-menu-item>
            <el-menu-item index="search">
              <el-icon><Search /></el-icon>
              <span>搜索功能</span>
            </el-menu-item>
            <el-menu-item index="visualization">
              <el-icon><PieChart /></el-icon>
              <span>数据可视化</span>
            </el-menu-item>
            <el-menu-item index="favorite">
              <el-icon><Star /></el-icon>
              <span>收藏功能</span>
            </el-menu-item>
            <el-menu-item index="faq">
              <el-icon><QuestionFilled /></el-icon>
              <span>常见问题</span>
            </el-menu-item>
            <el-menu-item index="contact">
              <el-icon><Service /></el-icon>
              <span>联系支持</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>
      
      <!-- 帮助内容 -->
      <el-col :span="18" :xs="24">
        <el-card class="help-content">
          <template #header>
            <div class="card-header">
              <span>{{ getCurrentCategoryTitle() }}</span>
            </div>
          </template>
          
          <!-- 入门指南 -->
          <div v-if="activeCategory === 'getting-started'">
            <el-collapse v-model="activeGettingStarted" accordion>
              <el-collapse-item title="如何注册账号？" name="1">
                <div>1. 点击登录页面的"立即注册"链接</div>
                <div>2. 填写用户名、密码和邮箱等必要信息</div>
                <div>3. 点击"注册"按钮完成注册</div>
                <div>4. 系统会发送验证邮件到您的邮箱，请及时查收并验证</div>
              </el-collapse-item>
              <el-collapse-item title="如何登录系统？" name="2">
                <div>1. 打开系统登录页面</div>
                <div>2. 输入您的用户名和密码</div>
                <div>3. 点击"登录"按钮进入系统</div>
                <div>4. 首次登录后建议完善个人信息</div>
              </el-collapse-item>
              <el-collapse-item title="系统主要功能介绍" name="3">
                <div><strong>文献管理：</strong>上传、浏览、编辑和删除文献</div>
                <div><strong>智能搜索：</strong>通过关键词、作者等多种方式搜索文献</div>
                <div><strong>数据可视化：</strong>查看文献统计图表和分析结果</div>
                <div><strong>个人收藏：</strong>收藏重要文献，方便快速访问</div>
              </el-collapse-item>
            </el-collapse>
          </div>
          
          <!-- 文献管理 -->
          <div v-if="activeCategory === 'literature'">
            <el-collapse v-model="activeLiterature" accordion>
              <el-collapse-item title="如何上传文献？" name="1">
                <div>1. 在左侧菜单中点击"文献管理" → "上传文献"</div>
                <div>2. 点击"选择文件"按钮选择要上传的文献</div>
                <div>3. 填写文献的基本信息（标题、作者、关键词等）</div>
                <div>4. 点击"上传"按钮完成上传</div>
                <div>5. 系统会自动进行文献识别和处理</div>
              </el-collapse-item>
              <el-collapse-item title="如何编辑文献信息？" name="2">
                <div>1. 在"文献列表"中找到要编辑的文献</div>
                <div>2. 点击文献右侧的"查看"按钮进入详情页</div>
                <div>3. 在详情页点击"编辑"按钮</div>
                <div>4. 修改相关信息后点击"保存"</div>
              </el-collapse-item>
              <el-collapse-item title="支持的文献格式" name="3">
                <div><strong>PDF格式：</strong>支持大多数PDF文献</div>
                <div><strong>图片格式：</strong>JPG、PNG、BMP等</div>
                <div><strong>文本格式：</strong>TXT、DOC、DOCX等</div>
                <div>系统会自动识别文献内容并提取关键信息</div>
              </el-collapse-item>
            </el-collapse>
          </div>
          
          <!-- 搜索功能 -->
          <div v-if="activeCategory === 'search'">
            <el-collapse v-model="activeSearch" accordion>
              <el-collapse-item title="如何进行文献搜索？" name="1">
                <div>1. 点击顶部导航栏的"文献搜索"或左侧菜单的搜索入口</div>
                <div>2. 在搜索框中输入关键词</div>
                <div>3. 可以选择搜索范围（标题、作者、关键词等）</div>
                <div>4. 点击"搜索"按钮查看结果</div>
              </el-collapse-item>
              <el-collapse-item title="高级搜索功能" name="2">
                <div><strong>多条件搜索：</strong>可以同时设置多个搜索条件</div>
                <div><strong>时间范围：</strong>可以限定文献的发表时间范围</div>
                <div><strong>分类筛选：</strong>可以根据文献分类进行筛选</div>
                <div><strong>排序方式：</strong>支持按相关度、时间等排序</div>
              </el-collapse-item>
              <el-collapse-item title="搜索结果处理" name="3">
                <div>搜索结果会显示文献的标题、作者、摘要等信息</div>
                <div>可以点击文献标题查看详细内容</div>
                <div>支持将搜索结果收藏或下载</div>
                <div>搜索历史会自动保存，方便快速访问</div>
              </el-collapse-item>
            </el-collapse>
          </div>
          
          <!-- 数据可视化 -->
          <div v-if="activeCategory === 'visualization'">
            <el-collapse v-model="activeVisualization" accordion>
              <el-collapse-item title="图表类型说明" name="1">
                <div><strong>文献分类统计图：</strong>展示不同分类文献的数量分布</div>
                <div><strong>文献发表趋势图：</strong>显示文献发表的时间趋势</div>
                <div><strong>关键词云图：</strong>展示高频关键词的分布情况</div>
                <div><strong>用户活跃度图：</strong>显示用户的使用情况统计</div>
              </el-collapse-item>
              <el-collapse-item title="如何查看统计数据？" name="2">
                <div>1. 点击左侧菜单的"数据可视化"</div>
                <div>2. 系统会自动加载并显示各类统计图表</div>
                <div>3. 可以通过时间筛选器查看特定时间段的数据</div>
                <div>4. 图表支持导出为图片或PDF格式</div>
              </el-collapse-item>
              <el-collapse-item title="数据更新机制" name="3">
                <div>系统每小时自动更新一次统计数据</div>
                <div>用户也可以手动点击"刷新数据"按钮更新</div>
                <div>统计数据基于用户上传和收藏的文献</div>
                <div>图表会根据数据量自动调整显示方式</div>
              </el-collapse-item>
            </el-collapse>
          </div>
          
          <!-- 收藏功能 -->
          <div v-if="activeCategory === 'favorite'">
            <el-collapse v-model="activeFavorite" accordion>
              <el-collapse-item title="如何收藏文献？" name="1">
                <div>1. 在文献列表或搜索结果中找到感兴趣的文献</div>
                <div>2. 点击文献右侧的"收藏"按钮</div>
                <div>3. 文献会自动添加到"我的收藏"列表中</div>
                <div>4. 已收藏的文献会显示"取消收藏"按钮</div>
              </el-collapse-item>
              <el-collapse-item title="管理收藏文献" name="2">
                <div>1. 点击左侧菜单的"我的收藏"进入收藏页面</div>
                <div>2. 可以查看所有收藏的文献</div>
                <div>3. 支持批量取消收藏操作</div>
                <div>4. 可以对收藏文献进行搜索和筛选</div>
              </el-collapse-item>
              <el-collapse-item title="收藏同步机制" name="3">
                <div>收藏信息会实时同步到云端</div>
                <div>在不同设备登录可以查看相同的收藏列表</div>
                <div>删除文献时会提示是否同时取消收藏</div>
                <div>收藏列表支持导出功能</div>
              </el-collapse-item>
            </el-collapse>
          </div>
          
          <!-- 常见问题 -->
          <div v-if="activeCategory === 'faq'">
            <el-collapse v-model="activeFAQ" accordion>
              <el-collapse-item title="上传文献失败怎么办？" name="1">
                <div>可能的原因：</div>
                <div>1. 文件格式不支持</div>
                <div>2. 文件大小超过限制（最大50MB）</div>
                <div>3. 网络连接不稳定</div>
                <div>解决方案：</div>
                <div>检查文件格式和大小，重新上传</div>
                <div>切换网络环境后重试</div>
                <div>联系技术支持获取帮助</div>
              </el-collapse-item>
              <el-collapse-item title="搜索不到想要的文献怎么办？" name="2">
                <div>建议尝试以下方法：</div>
                <div>1. 检查关键词拼写是否正确</div>
                <div>2. 尝试使用同义词或相关词汇</div>
                <div>3. 扩大搜索时间范围</div>
                <div>4. 使用高级搜索功能</div>
                <div>5. 联系管理员确认文献是否已收录</div>
              </el-collapse-item>
              <el-collapse-item title="系统运行缓慢怎么办？" name="3">
                <div>可能的解决方案：</div>
                <div>1. 清理浏览器缓存</div>
                <div>2. 关闭其他占用资源的程序</div>
                <div>3. 刷新页面或重新登录</div>
                <div>4. 更换浏览器尝试</div>
                <div>5. 联系技术支持反馈问题</div>
              </el-collapse-item>
            </el-collapse>
          </div>
          
          <!-- 联系支持 -->
          <div v-if="activeCategory === 'contact'">
            <el-form
              :model="contactForm"
              :rules="contactRules"
              ref="contactFormRef"
              label-width="100px"
              class="contact-form"
            >
              <el-form-item label="姓名" prop="name">
                <el-input v-model="contactForm.name" placeholder="请输入您的姓名" />
              </el-form-item>
              
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="contactForm.email" placeholder="请输入您的邮箱" />
              </el-form-item>
              
              <el-form-item label="问题类型" prop="type">
                <el-select v-model="contactForm.type" placeholder="请选择问题类型">
                  <el-option label="功能建议" value="suggestion" />
                  <el-option label="技术问题" value="technical" />
                  <el-option label="使用咨询" value="consultation" />
                  <el-option label="其他问题" value="other" />
                </el-select>
              </el-form-item>
              
              <el-form-item label="问题描述" prop="description">
                <el-input
                  v-model="contactForm.description"
                  type="textarea"
                  :rows="6"
                  placeholder="请详细描述您遇到的问题或建议"
                  maxlength="1000"
                  show-word-limit
                />
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="submitContactForm" :loading="submitting">
                  提交
                </el-button>
                <el-button @click="resetContactForm">
                  重置
                </el-button>
              </el-form-item>
            </el-form>
            
            <div class="contact-info">
              <h3>其他联系方式</h3>
              <p><strong>技术支持邮箱：</strong>3186258041@qq.com</p>
              <p><strong>客服电话：</strong>130-7794-3136</p>
              <p><strong>工作时间：</strong>周一至周五 9:00-18:00</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { 
  Help, Guide, Document, Search, PieChart, 
  Star, QuestionFilled, Service 
} from '@element-plus/icons-vue'
import { userApi } from '@/api/user'

// 响应式数据
const activeCategory = ref('getting-started')
const submitting = ref(false)

const activeGettingStarted = ref('1')
const activeLiterature = ref('1')
const activeSearch = ref('1')
const activeVisualization = ref('1')
const activeFavorite = ref('1')
const activeFAQ = ref('1')

const contactForm = ref({
  name: '',
  email: '',
  type: '',
  description: ''
})

const contactFormRef = ref<FormInstance>()

const contactRules = ref<FormRules>({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择问题类型', trigger: 'change' }
  ],
  description: [
    { required: true, message: '请输入问题描述', trigger: 'blur' }
  ]
})

// 方法
const handleCategorySelect = (index: string) => {
  activeCategory.value = index
}

const getCurrentCategoryTitle = () => {
  const titles: Record<string, string> = {
    'getting-started': '入门指南',
    'literature': '文献管理',
    'search': '搜索功能',
    'visualization': '数据可视化',
    'favorite': '收藏功能',
    'faq': '常见问题',
    'contact': '联系支持'
  }
  return titles[activeCategory.value] || '帮助中心'
}

const submitContactForm = async () => {
  if (!contactFormRef.value) return
  
  await contactFormRef.value.validate(async (valid) => {
    if (valid) {
      submitting.value = true
      try {
        // 调用联系支持API
        await userApi.submitContact(contactForm.value)
        ElMessage.success('提交成功，我们会尽快回复您！')
        resetContactForm()
      } catch (error: any) {
        ElMessage.error(error.message || '提交失败，请稍后重试')
      } finally {
        submitting.value = false
      }
    }
  })
}

const resetContactForm = () => {
  contactForm.value = {
    name: '',
    email: '',
    type: '',
    description: ''
  }
}
</script>

<style scoped>
.help-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.help-nav, .help-content {
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.card-header {
  font-weight: bold;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.help-menu {
  border: none;
}

.help-menu .el-menu-item {
  height: 50px;
}

.contact-form {
  max-width: 600px;
  margin-bottom: 30px;
}

.contact-info {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.contact-info h3 {
  margin-top: 0;
  color: #303133;
}

.contact-info p {
  margin: 10px 0;
  color: #606266;
}

@media (max-width: 768px) {
  .help-container {
    padding: 10px;
  }
  
  .el-col {
    margin-bottom: 20px;
  }
  
  .contact-form {
    max-width: 100%;
  }
}
</style>